<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        height: 1000px;
        padding: 0;
        margin: 0;
      }
      .box {
        width: 200px;
        height: 100px;
        padding: 10px;
        border: 1px solid red;
        margin: 10px;
        overflow: scroll;
        background-color: blue;
      }
      .back {
        background-color: green;
        position: fixed;
        bottom: 100px;
        right: 100px;
      }
      .box2 {
        width: 200px;
        height: 100px;
        margin: 10px;
        padding: 10px;
        border: 1px solid red;
      }
      .box3 {
        width: 100px;
        height: 50px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <img src="./images/b01.jpg" alt="" id="img" />
    <div class="box">
      啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    </div>
    <div class="box2">
      <div class="box3"></div>
    </div>
    <div class="back">回到顶部</div>
    <script>
      // 等待页面所有资源加载完毕，执行函数
      window.addEventListener("load", function () {
        console.log("页面加载完毕");
      });
      const img = document.querySelector("#img");
      img.addEventListener("load", function () {
        console.log("图片加载完毕");
      });
      // 等待DOM加载完毕
      document.addEventListener("DOMContentLoaded", function () {
        console.log("DOM加载完毕");
      });

      // 页面滚动
      window.addEventListener("scroll", function () {
        const scrollTop = document.documentElement.scrollTop;
        console.log("页面滚动", scrollTop);
        if (scrollTop > 100) {
          document.querySelector(".box").style.backgroundColor = "red";
        } else {
          document.querySelector(".box").style.backgroundColor = "blue";
        }
      });
      // 元素滚动
      const box = document.querySelector(".box");
      box.addEventListener("scroll", function () {
        console.log("div元素滚动像素", box.scrollTop);
      });
      // scrollTop可读写
      const back = document.querySelector(".back");
      back.addEventListener("click", function () {
        // 第一种
        // document.documentElement.scrollTop = 0;
        // 第二种
        window.scrollTo(0, 0);
       
      });


      // 浏览器窗口尺寸变化
      window.addEventListener("resize", function () {
        console.log("document.documentElement.clientWidth", document.documentElement.clientWidth, document.documentElement.clientHeight);
      });

      // 获取元素的宽高
      const box2 = document.querySelector(".box2");
      console.log("box2.clientWidth", box2.clientWidth, box2.clientHeight);
      console.log("box2.offsetWidth", box2.offsetWidth, box2.offsetHeight);
      console.log("box2.scrollWidth", box2.scrollWidth, box2.scrollHeight);

      // 获取元素的坐标
      const box3 = document.querySelector(".box3");
      // 看最后一级带有定位的祖先元素
      console.log("box3.offsetLeft", box3.offsetLeft, box3.offsetTop);
      // getBoundingClientRect：返回元素大小及其相对视口的位置
      console.log("box3.getBoundingClientRect()", box3.getBoundingClientRect());
    </script>
  </body>
</html>
